<template>
    <el-dialog
      title="反馈消息"
      :visible.sync="dialogFormVisible"
      @close="close"
      class="show"
      width="40%"
    >
      <el-tag type="info" center fz-14 class="tip" ww1>
        这是普通反馈，如需针对某个素材发起反馈，请在播放页或购买记录页点击“举报”或“投诉”
      </el-tag>

      <el-form :model="form" :hide-required-asterisk="true">
        <el-form-item label="" :label-width="formLabelWidth">
          <el-radio v-model="form.radio" label="1">意见建议</el-radio>
          <el-radio v-model="form.radio" label="2">举报与投诉</el-radio>
          <el-radio v-model="form.radio" label="3">BUG报告</el-radio>
          <el-radio v-model="form.radio" label="4">其他</el-radio>
          <template v-if="form.radio">
            <div flex flex-b flex-c class="chara-wap">
              <p class="chakra-text">
                白羊星传媒, 您好, 我们非常重视您的反馈，您将很快收到回复反馈
              </p>
            </div>
            <div flex style="margin-bottom:16px">
              <p>如需上传图片，请</p>
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="10"
                :before-upload= "beforeUpload"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
                :file-list="fileList">
                <el-button style="padding:6px 16px;margin-left:10px" size="small" type="primary">点击上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
            <el-input
              type="textarea"
              :placeholder="`${placeholder[form.radio]}`"
              v-model="contents"
              maxlength="255"
              show-word-limit
              :required="true"
              class="chara-form"
            >
            </el-input>
            <el-input style="margin-top: 10px;" class="chara-form" placeholder="这里是链接地址" v-model="feedbackUrl"></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="form.radio">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cmsFeedbackSave"
          >确 定</el-button
        >
      </div>
    </el-dialog>
</template>
<script>
import $http from "@/api/feedback/feedback"
export default {
    data() {
        return {
            uploadUrl: this.$url.uploadUrl,
            dialogFormVisible: false,
            feedbackImg: [],
            form: {
                name: "",
                radio: "1",
                textarea: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
             placeholder: {
                1: "您一定有很棒的想法，请帮助我们改进服务吧，欢迎吐槽 ^_^ ",
                2: "告诉我们您发现的问题，我们将很快处理，有价值的反馈会有奖励哦",
                3: "您可以提交多对重复素材，将相互重复的2个素材编号写到一起（请只写编号，以逗号分割），用回车分割每一对",
                4: "为避免耽误使用，请准确描述您的问题",
            },
            formLabelWidth: "40px",
            fileList: [],
            contents: '', 
            feedbackUrl: ''
        }
    },
    methods: {
        /**
         * 验证
         * "feedbackImg": this.feedbackImg.join(','),  
            "contents": this.contents,
            "feedbackUrl": this.feedbackUrl,
        */
        yzInput() {
          if(this.feedbackImg.length == 0) {
            this.$message.error('请选择图片');
            return false;
          } else if(!this.contents) {
            this.$message.error('反馈信息不能为空');
            return false;
          } else if(!this.feedbackUrl) { 
            this.$message.error('链接地址不能为空');
            return false;
          }

          return true;
        },
        // 图片上传相关
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handlePreview(file) {
        console.log(file);
        },
        handleExceed(files, fileList) {
          debugger;
        this.$message.warning(`当前限制选择 10个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        /*****文件上传成功函数 */
        handleSuccess(response, file, fileList) {
          this.feedbackImg.push(response.url);
          console.log(this.feedbackImg);
        },
        //上传前
        beforeUpload() {
          console.log(1111111);
          this.feedbackImg = [];
        },
        //反馈上传
        cmsFeedbackSave() {
          let yzInput = this.yzInput();
          if(!yzInput) {
            return;
          }
          let data = {
            "type": this.form.radio,
            "feedbackImg": this.feedbackImg.join(','),  
            "contents": this.contents,
            "feedbackUrl": this.feedbackUrl,
            "userId": sessionStorage.getItem('userId')
          };
          $http.cmsFeedbackSave(data).then(res => {
            console.log("反馈上传",res);
            this.dialogFormVisible = false;
            this.$router.go(0);
          })
        },
        init() {
            this.dialogFormVisible = true; 
        },
        close() {
           this.dialogFormVisible = false; 
        }
    }
}
</script>
<style scoped>
    .show >>> .tip.el-tag.el-tag--info.el-tag--light {
        height: auto;
        line-height: 0;
        padding: 20px;
    }
</style>